<!-- eslint-disable InnerIPLeak -->
<template>
  <div class="panel-tab__content">
    <el-form
      ref="flowBaseInfoPropertyForm"
      label-width="auto"
      :rules="rules"
      :model="elementBaseInfo"
      @submit.native.prevent>
      <el-form-item :label="realCodeDesc" required prop="id" v-show="showRealCodeDesc">
        <template slot="label">
          <el-tooltip key="resultNoticeTip" placement="top-start" @click.stop.prevent>
            <div slot="content" class="flowDesignPropertyInputTipBox">
              <p>{{ $t('varCompRules') }}</p>
            </div>
            <i class="el-icon-question"></i>
          </el-tooltip>
          <span style="margin-left:2px">{{ realCodeDesc }}</span>
        </template>
        <el-input
          maxlength="50"
          v-model="elementBaseInfo.id"
          :disabled="idEditDisabled"
          clearable
          @change="updateBaseInfo('id', 'definitionCode')" />
      </el-form-item>
      <el-form-item :label="realNameDesc" prop="name">
        <el-input
          maxlength="20"
          v-model="elementBaseInfo.name"
          clearable
          @change="updateBaseInfo('name', 'definitionName')" />
      </el-form-item>
      <!--定时时钟的基础属性-->
      <template v-if="isTimerEventDefinition">
        <!-- 事件类型 -->
        <el-form-item :label="$t('eventType')">
          <el-select v-model="timerEventDefinitionInfo.type" @change="handlerTimerEventType">
            <el-option label="timeDate" value="timeDate"></el-option>
            <el-option label="timeDuration" value="timeDuration"></el-option>
            <el-option label="timeCycle" value="timeCycle"></el-option>
          </el-select>
        </el-form-item>
        <!-- 时间值 -->
        <el-form-item>
          <template slot="label">
            <el-tooltip placement="top-start" @click.stop.prevent>
              <div slot="content" class="flowDesignPropertyInputTipBox">
                <p>{{ $t('eventTypeConfigDefine') }}</p>
                <p>{{ $t('eventTypeConfigDefineTip1') }}</p>
                <p>{{ $t('eventTypeConfigDefineTip2') }}</p>
                <p>{{ $t('eventTypeConfigDefineTip3') }}</p>
              </div>
              <i class="header-icon el-icon-info"></i>
            </el-tooltip>
            <span style="margin-left:2px">{{ $t('time') }}</span>
          </template>
          <el-input v-model="timerEventDefinitionInfo.timeVal" clearable @change="handlerTimerEventDefinition" />
        </el-form-item>
      </template>
      <!--流程的基础属性 elementBaseInfo.$type === 'bpmn:Process'-->
      <template v-if="false">
        <el-form-item :label="$t('versionTag')">
          <el-input v-model="elementBaseInfo.versionTag" clearable @change="updateBaseInfo('versionTag')" />
        </el-form-item>
        <el-form-item :label="$t('executable')">
          <el-switch
            v-model="elementBaseInfo.isExecutable"
            :active-text="$t('yes')"
            :inactive-text="$t('no')"
            @change="updateBaseInfo('isExecutable')" />
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>
<script>

export default {
  name: 'ElementBaseInfo',
  props: {
    // eslint-disable-next-line vue/require-default-prop
    businessObject: Object,
    // eslint-disable-next-line vue/require-default-prop
    type: String,
    idEditDisabled: {
      type: Boolean,
      default: true
    }
  },
  data () {
    const validateId = (rule, value, callback) => {
      if (!(/^[a-zA-Z_]\w{0,49}$/i.test(value))) {
        // eslint-disable-next-line callback-return
        callback(new Error(this.$t('realCodeDescTip')))
      } else {
        // eslint-disable-next-line callback-return
        callback()
      }
    }
    return {
      elementBaseInfo: {
        id: '',
        name: '',
        $type: '',
        eventDefinitions: []
      },
      timeDuration: null,
      timerEventDefinitionInfo: {
        type: 'timeDate',
        timeVal: ''
      },
      rules: {
        id: [
          { required: true, message: this.$t('pleaseInput'), trigger: 'change' },
          { validator: validateId, trigger: 'change' },
          { validator: validateId, trigger: 'blur' }
        ],
        name: [
          { required: true, message: this.$t('pleaseInput'), trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  computed: {
    // 判断是否为定时器时钟
    isTimerEventDefinition () {
      if (this.elementBaseInfo.eventDefinitions && this.elementBaseInfo.eventDefinitions[0]) {
        return this.elementBaseInfo.eventDefinitions[0].$type === 'bpmn:TimerEventDefinition'
      }
      return false
    },
    // 编码(流程/节点)
    realCodeDesc () {
      if (this.elementBaseInfo.$type === 'bpmn:Process') {
        return this.$t('flowCode')
      }
      return this.$t('nodeCode')
    },
    showRealCodeDesc () {
      return this.elementBaseInfo.$type === 'bpmn:Process'
    },
    // 名称(流程/节点)
    realNameDesc () {
      if (this.elementBaseInfo.$type === 'bpmn:Process') {
        return this.$t('flowName')
      }
      return this.$t('nodeName')
    },
    formData () {
      return this.$store.state.flowDesign.formData
    }
  },
  watch: {
    businessObject: {
      immediate: false,
      handler (val) {
        if (val) {
          this.$nextTick(() => this.resetBaseInfo())
        }
      }
    }
  },
  methods: {
    resetBaseInfo () {
      let bpmnElement = {}
      if (window && window.bpmnInstances && window.bpmnInstances.bpmnElement) {
        // eslint-disable-next-line prefer-destructuring
        bpmnElement = window.bpmnInstances.bpmnElement
      }
      this.bpmnElement = bpmnElement
      console.log(this.bpmnElement, window.bpmnInstances, '9393939')
      const info = this.bpmnElement.businessObject
      this.elementBaseInfo.id = info.id
      this.elementBaseInfo.name = ''
      this.elementBaseInfo.$type = info.$type
      this.elementBaseInfo.eventDefinitions = info.eventDefinitions ? [...info.eventDefinitions] : []
      if (info.$type === 'bpmn:Process') {
        this.formData.definitionCode = info.id
        this.formData.definitionName = info.name
        this.elementBaseInfo.name = info.name
      }else if (info.name) {
        this.elementBaseInfo.name = info.name
      }
    },
    // 处理定时器时钟事件类型变化时
    handlerTimerEventType () {
      this.timerEventDefinitionInfo.timeVal = ''
    },
    // 处理定时器时钟属性
    handlerTimerEventDefinition () {
      const { eventDefinitions } = this.bpmnElement.businessObject
      const newCondition = window.bpmnInstances.moddle.create('bpmn:FormalExpression',
        { 'xsi:type': 'bpmn:tFormalExpression', body: this.timerEventDefinitionInfo.timeVal })
      const props = {
        timeDuration: undefined,
        timeDate: undefined,
        timeCycle: undefined
      }
      props[this.timerEventDefinitionInfo.type] = newCondition
      window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, eventDefinitions[0], props)
    },
    updateBaseInfo (key, formKey) {
      const attrObj = Object.create(null)
      attrObj[key] = this.elementBaseInfo[key]
      if (key === 'id') {
        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
          id: this.elementBaseInfo[key],
          di: { id: `${this.elementBaseInfo[key]}_di` }
        })
      } else {
        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, attrObj)
      }
      if (this.bpmnElement.businessObject.$type === 'bpmn:Process') {
        if (formKey && typeof this.formData[formKey] !== 'undefined') {
          this.formData[formKey] = this.elementBaseInfo[key]
        }
      }
    },
    validateData () {
      return new Promise((resolve) => {
        if (this.$refs.flowBaseInfoPropertyForm) {
          this.$refs.flowBaseInfoPropertyForm.validate((valid) => {
            if (valid) {
              resolve(true)
            } else {
              resolve('base')
            }
          })
        }
        resolve(true)
      })
    }
  },
  beforeDestroy () {
    this.bpmnElement = null
  }
}
</script>
